<style type="text/css">          
    td{padding:0;margin:0;}
</style>
<div id="result">
    <div class="reLoad">
        <?php echo $this->Session->flash(); ?>
        <div class="div_header1"><?php if (isset($this->data['Cat']['Category']['category_name']))
            echo __("Sizes for ") . $this->data['Cat']['Category']['category_name']; ?></div>
        <br style="clear:both;">
        <a style="background:#73AE0B; color:#fff; font-size:14px;text-decoration:none; padding:2px 5px;" onclick="showPop(this)" elmid="<?php echo $this->data['Cat']['Category']['id']; ?>" action="size_labels" controller="add_category" href="javascript:void(0);">Set label for sizes</a>
        <table align="center" border="0" cellpadding="0" width="530" id="brandstable">
            <?php
            if ($this->data['Size']):
                foreach ($this->data['Size'] as $size):
                    ?>
                    <tr>
                        <td width="25">
                            <?php
                            $checked = "";
                            if ($this->data['Cat']['Category']['sizes_dropdown'] && in_array($size['Sizetitle']['id'], $this->data['Cat']['Category']['sizes_dropdown']))
                                $checked = ' checked="checked"';
                            else
                                $checked = "";
                            ?>
                            <input name="setdropdown[]" type="checkbox" value="<?php echo $size['Sizetitle']['id']; ?>" <?php echo $checked; ?> />
                        </td>
                        <td width="40"><a href="javascript:void(0);"  action="deletesizelabel" controller="add_category" ElmID2="<?php echo $this->data['Cat']['Category']['id']; ?>" ElmID="<?php echo $size['Sizetitle']['id']; ?>" onclick="deleteValue(this)"><?php echo $this->Html->image("close-btn.png", array("alt" => "Delete", 'border' => '0')); ?></a>&nbsp;
                            <a href="javascript:void(0);" class="editsizetitle" valueID="<?php echo $size['Sizetitle']['id']; ?>"><?php echo $this->Html->image("edit.gif", array("alt" => "Edit", 'border' => '0')); ?></a></td>
                        <td width="450">
                            <span id="editsizetitle_<?php echo $size['Sizetitle']['id']; ?>"><?php echo $size['Sizetitle']['size_title']; ?></span>
                            <div id="edittitleform_<?php echo $size['Sizetitle']['id']; ?>" style="display:none;">
                                <input type="hidden" name="cat_id" id="CatId_<?php echo $size['Sizetitle']['id']; ?>" value="<?php echo $this->data['Cat']['Category']['id']; ?>">
                                <input type="text" name="size_title" id="SizeTitle_<?php echo $size['Sizetitle']['id']; ?>" size="15" value="<?php echo $size['Sizetitle']['size_title']; ?>">&nbsp;
                                <input type="button" value="Cancel" name="Cancel_title" upid="<?php echo $size['Sizetitle']['id']; ?>">&nbsp;
                                <input type="button" name="Update_title" value="Update" upid="<?php echo $size['Sizetitle']['id']; ?>">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td width="25">&nbsp;</td>
                        <td width="25">&nbsp;</td>
                        <td width="450">
                            <form method="post" id="addSizeValue_<?php echo $size['Sizetitle']['id']; ?>"  name="addSizeValue_<?php echo $size['Sizetitle']['id']; ?>" action="javascript:void(0);">
                                <table align="left" cellpadding="0" cellspacing="0" border="0" id="SizeValueTable_<?php echo $size['Sizetitle']['id']; ?>">
                                    <?php
                                    if ($size['Sizevalue']) {
                                        $total_size_value = count($size['Sizevalue']);
                                        $i = 1;
                                        foreach ($size['Sizevalue'] as $Sizevalue) {
                                            ?>
                                            <tr>
                                                <td width="10">&nbsp;</td>
                                                <td width="10" align="center">
                                                    <?php
                                                    if ($total_size_value == $i) {
                                                        echo $this->Html->image("link-line-02.gif", array("alt" => "Line", 'border' => '0'));
                                                    } else {
                                                        echo $this->Html->image("link-line-01.gif", array("alt" => "Line", 'border' => '0'));
                                                    }
                                                    ?>
                                                </td>
                                                <td width="10"><?php echo $this->Html->image("arrow-black.gif", array("alt" => "Line", 'width' => '10', 'height' => '7', 'border' => '0')); ?></td>
                                                <td width="220">
                                                    <span id="editsizevalue_<?php echo $Sizevalue['id']; ?>"><?php echo $Sizevalue['size_value']; ?></span>
                                                    <div id="editsizeform_<?php echo $Sizevalue['id']; ?>" style="display:none;">												
                                                        <input type="hidden" name="sizetitle_id" id="SizeTitleId_<?php echo $Sizevalue['id']; ?>" value="<?php echo $size['Sizetitle']['id']; ?>">
                                                        <input type="text" name="size_value" id="SizeValue_<?php echo $Sizevalue['id']; ?>" size="15" value="<?php echo $Sizevalue['size_value']; ?>">&nbsp;
                                                        <input type="button" value="Cancel" name="Cancel" upid="<?php echo $Sizevalue['id']; ?>">&nbsp;
                                                        <input type="button" name="Update" value="Update" upid="<?php echo $Sizevalue['id']; ?>">												
                                                    </div>
                                                </td>
                                                <td width="120">
                                                    <a href="javascript:void(0);" class="editsizevalue" valueID="<?php echo $Sizevalue['id']; ?>" sizetitleID="<?php echo $size['Sizetitle']['id']; ?>"><?php echo $this->Html->image("edit.gif", array("alt" => "Edit", 'border' => '0')); ?></a>
                                                    <a href="javascript:void(0);" action="deletesizevalue" controller="add_category" ElmID2="<?php echo $this->data['Cat']['Category']['id']; ?>" ElmID="<?php echo $Sizevalue['id']; ?>" valueID="<?php echo $Sizevalue['id']; ?>"  onclick="deleteValue(this)" class="deleteValue1"><?php echo $this->Html->image("close-btn.png", array("alt" => "Delete", 'border' => '0')); ?></a>
                                                </td>
                                            </tr>
                <?php $i++;
            }
        } ?>

                                </table>
                                <table align="left" cellpadding="0" cellspacing="0" border="0"width="200">
                                    <tr>
                                        <td width="10">&nbsp;</td>
                                        <td colspan="140" valign="top">
                                            <input type="hidden"  name="data[sizetitle_id]" id="dataSizetitleId" value="<?php echo $size['Sizetitle']['id']; ?>" />
                                            <input type="hidden"  name="data[sizetitle_size_title]" value="<?php echo $size['Sizetitle']['size_title']; ?>" />
        <?php echo $this->Form->input('size_value', array('label' => false, 'size' => 30, 'maxlength' => 50, 'id' => 'size_value', 'class' => "required", 'title' => "Enter " . $size['Sizetitle']['size_title'] . " size", 'value' => "Enter " . $size['Sizetitle']['size_title'] . " size"
            , 'onblur' => "if(this.value=='') this.value='Enter " . $size['Sizetitle']['size_title'] . " size'", 'onfocus' => "if(this.value=='Enter " . $size['Sizetitle']['size_title'] . " size') this.value='';")); ?></td>
                                        <td width="50" valign="top"><input name="Add" class="Addsizevalue" sizeID="<?php echo $size['Sizetitle']['id']; ?>" catID="<?php echo $this->data['Cat']['Category']['id']; ?>" type="button" value="Add" onclick="addSizeValue(this)"/></td>
                                    </tr>
                                </table>
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" height="10">&nbsp;</td>
                    </tr>
    <?php endforeach;
    echo '</table><table>';
    if (count($this->data['Size']) > 0): ?>
                    <tr>
                        <td colspan="3" align="right">
                            <p style="color:red;text-align:left"><b>Important Note:</b> If you want to set sizes in separete/indivisual dropdown, then checked them and click on "Set in seperate dropdown". Others will be set in one dropdown.</p>
                            <input type="button" id="dropdown" value="Set in seperate dropdown" />&nbsp;&nbsp;
                            <input type="button" id="removedropdown" value="Remove from dropdown" />
                        </td>
                    </tr>
    <?php endif;
endif; ?>
        
            <tr>
                <td colspan="3" valign="top">
                    <form method="post" id="addSize"  name="addSize" action="<?php echo Configure::read('base_url') . "add_category/sizes/" . $this->data['Cat']['Category']['id']; ?>">

                        <table cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td width="25">&nbsp;</td>
                                <td valign="top">
                                    <input type="hidden"  name="data[category_id]" id="catid" value="<?php echo $this->data['Cat']['Category']['id']; ?>" />
<?php echo $this->Form->input('size_title', array('label' => false, 'size' => 30, 'maxlength' => 50, 'id' => 'size_title', 'class' => "required", 'title' => "Enter size title", 'value' => "Enter size title"
    , 'onblur' => "if(this.value=='') this.value='Enter size title'", 'onfocus' => "if(this.value=='Enter size title') this.value='';")); ?>

                                </td>
                                <td  valign="top"><input type="submit" name="submitButton" value="Add" /></td>
                            </tr>
                        </table>
                    </form>
                </td>
            </tr>
        </table>
    </div>
</div>
<?php echo $html->script(array("jquery.min.js", "jquery.form.js", "jquery.validate.js", "jquery.tablednd.js")); ?>
<script type="text/javascript">
    //Size Title 
    jQuery(".editsizetitle").live('click',function(){
        var valueID=jQuery(this).attr("valueID");
        jQuery("#editsizetitle_"+valueID).fadeOut("200");
        jQuery("#edittitleform_"+valueID).fadeIn("200");
	
    });

    jQuery('[name="Cancel_title"]').live('click', function(){
        var valueID=jQuery(this).attr("upid");
        jQuery("#edittitleform_"+valueID).fadeOut("200");
        jQuery("#editsizetitle_"+valueID).fadeIn("200");	
    });

    jQuery('[name="Update_title"]').live('click', function(){
        valueID=jQuery(this).attr("upid");
        var CatId=jQuery("#CatId_"+valueID).val();
        var SizeTitle=jQuery("#SizeTitle_"+valueID).val();

        //var data=jQuery("form#editsizevalue"+valueID).serialize();
        var data="sizetitle_id="+valueID+"&size_title="+SizeTitle+"&cat_id="+CatId;
        jQuery.ajax({
            type: 'post',
            url: baseurl+"add_category/update_size_title/",
            data: data,
            dataType: 'json',
            success:function(msg){
                if(msg.message=="Duplicate"){
                    alert("Duplicate entry. Please use different.");
                }
                else if(msg.message=="Yes")
                {
                    jQuery("#editsizetitle_"+valueID).html(msg.value);
                    jQuery("#SizeTitle_"+valueID).val(msg.value);
                    jQuery("#edittitleform_"+valueID).fadeOut("200");
                    jQuery("#editsizetitle_"+valueID).fadeIn("200");						
                    alert("Size title has been updated successfully.");
                }else{
                    alert("Size title could not updated. Please try again.");
                }
                return false;
            }	
        });
        return false;
    });
    //Size Title End

    //Size Value
    jQuery("a.editsizevalue").live('click',function(){
        var valueID=jQuery(this).attr("valueID");
        var sizetitleID=jQuery(this).attr("sizetitleID");
        jQuery("#editsizevalue_"+valueID).fadeOut("200");
        jQuery("#editsizeform_"+valueID).fadeIn("200");
    });

    jQuery('[name="Cancel"]').live('click', function(){
        var valueID=jQuery(this).attr("upid");
        jQuery("#editsizeform_"+valueID).fadeOut("200");
        jQuery("#editsizevalue_"+valueID).fadeIn("200");
    });

    jQuery('[name="Update"]').live('click', function(){
        var valueID=jQuery(this).attr("upid");	
        var SizeTitleId=jQuery("#SizeTitleId_"+valueID).val();
        var SizeValue=jQuery("#SizeValue_"+valueID).val();

        //var data=jQuery("form#editsizevalue"+valueID).serialize();
        var data="size_id="+valueID+"&sizetitle_id="+SizeTitleId+"&size_value="+SizeValue;
	
        jQuery.ajax({
            type: 'post',
            url: baseurl+"add_category/update_size_value/",
            data: data,
            dataType: 'json',
            success:function(msg){
                if(msg.message=="Duplicate"){
                    alert("Duplicate entry. Please use different.");
                }
                else if(msg.message=="Yes")
                {
                    jQuery("#editsizevalue_"+valueID).html(msg.value);
                    jQuery("#SizeValue_"+valueID).val(msg.value);
                    jQuery("#editsizeform_"+valueID).fadeOut("200");
                    jQuery("#editsizevalue_"+valueID).fadeIn("200");
                    jQuery("#SizeValue_"+valueID).val(msg.value);
                    alert("Size value has been updated successfully.");
                }else{
                    alert("Size value could not updated. Please try again.");
                }
                return false;
            }	
        });
	
        return false;
    });
    //Size Value End
    jQuery('[name="submitButton"]').live('click', function(){
        jQuery("#addSize").validate({		
            submitHandler: function(form) {
                jQuery(form).ajaxSubmit({
                    //target: "#result
                    success: function(){
                        jQuery("#result").load(baseurl+"add_category/sizes/"+jQuery('#catid').val()+" #result .reLoad");
                    }
                });
            }
        });
    });
		
    jQuery('#dropdown').live('click', function(){
        catID=jQuery('input[name="data[category_id]"]').val();	
        data=jQuery('input[type="checkbox"]').serialize();
        if(data!=""){
            jQuery.ajax({
                type: 'post',
                url: baseurl+"add_category/setdropdown/"+catID,			
                data: data,
                dataType: 'json',
                success:function(data){					
                    jQuery("#result").load(baseurl+"add_category/sizes/"+data.message+" #result .reLoad");
                }	
            });
            return false;	
        }	
        else{
            alert("You have to select the items to set in a dropdown.");
        }
    });	

    jQuery('input#removedropdown').live('click', function(){
        catID=jQuery('input[name="data[category_id]"]').val();	
        data=jQuery('input[type="checkbox"]').serialize();
	
        jQuery.ajax({
            type: 'post',
            url: baseurl+"add_category/removedropdown/"+catID,			
            data: data,
            dataType: 'json',
            success:function(data){
                jQuery("#result").load(baseurl+"add_category/sizes/"+data.message+" #result .reLoad");
            }
        });
        return false;		
    });		
      
    function deleteValue(param){
        if(confirm("Are you sure you want to delete this?")){
            var id=jQuery(param).attr("elmid");
            var id2=jQuery(param).attr("elmid2");
            var action=jQuery(param).attr("action");
            jQuery.ajax({
                type:"get",
                url:baseurl+"add_category/"+action+"/"+id+"/"+id2,
                datatype: 'html',
                success: function(){
                    jQuery("#result").load(""+baseurl+"add_category/sizes/"+id2+" #result .reLoad");
                }
            });    
            return false;
        }
        else return false;	
    }
    function addSizeValue(param){
        catID=jQuery(param).attr("catID");
        sizeID=jQuery(param).attr("sizeID");
        size_title_ID=jQuery("form#addSizeValue_"+sizeID+" input[name='data[sizetitle_id]']").val();
        data = jQuery("form#addSizeValue_"+sizeID).serialize();
        jQuery.ajax({
            type: 'POST',
            url: baseurl+"add_category/addsizevalue/"+sizeID,
            data: data,
            dataType: 'json',
            success: function(data){
                if(data.message=="Duplicate"){
                    alert("Duplicate entry. Please use different.");
                }
                else if(data.message=="Yes")
                {
                    jQuery("form#addSizeValue_"+sizeID+" input[type='text']").val("");
                    jQuery("#SizeValueTable_"+sizeID+" tr:last").find('td').first().next().html('<img src="<?php echo Configure::read('base_url'); ?>/img/link-line-01.gif" alt="Line" border="0">');
                    html='<tr><td width="10">&nbsp;</td><td width="10" align="center"><img src="<?php echo Configure::read('base_url'); ?>/img/link-line-02.gif" alt="Line" border="0"></td><td width="10"><img src="<?php echo Configure::read('base_url'); ?>img/arrow-black.gif" alt="Line" width="10" height="7" border="0"></td><td width="220"><span id="editsizevalue_'+data.valueID+'">'+data.value+'</span><div id="editsizeform_'+data.valueID+'" style="display:none;"><input type="hidden" name="sizetitle_id" id="SizeTitleId_'+data.valueID+'" value="'+size_title_ID+'"><input type="text" name="size_value" id="SizeValue_'+data.valueID+'" size="15" value="'+data.value+'">&nbsp;<input type="button" value="Cancel" name="Cancel" upid="'+data.valueID+'">&nbsp;<input type="button" name="Update" value="Update" upid="'+data.valueID+'"></div></td><td width="120"><a href="javascript:void(0);" class="editsizevalue" valueID="'+data.valueID+'" sizetitleID="'+size_title_ID+'"><?php echo $this->Html->image("edit.gif", array("alt" => "Edit", 'border' => '0')); ?></a>&nbsp;<a href="javascript:void(0);" action="deletesizevalue" controller="add_category" ElmID2="'+catID+'" ElmID="'+data.valueID+'"   onclick="deleteValue(this)" class="deleteValue1"><img src="<?php echo Configure::read('base_url'); ?>img/close-btn.png" alt="Delete" border="0"></a></td></tr>';
                    jQuery("#SizeValueTable_"+sizeID).append(html);
                }else{
                    jQuery("form#addSizeValue_"+sizeID+" input[type='text']").addClass("error");
                    html='<label for="size_title" generated="true" class="error">Enter size value here</label>';
                    jQuery("form#addSizeValue_"+sizeID+" input[type='text']").after(html);
                }
                return false;

            }
        });
    }
 var i=1;
    var trs=jQuery("#brandstable tr");
    var length=trs.length;

    function moreItem(){
        trs.show();
        trs.each(function(index){
            if(index > i*20 && index < length){
                jQuery(this).hide();
            }

        });
        i++;
        menuHide(parseInt(jQuery("#brandstable tr:hidden").length));
    }
    function lessItem(){
        i=i-2;
        moreItem();
        menuHide(parseInt(jQuery("#brandstable tr:hidden").length));
    }

    function menuHide(hiddenFields){
        diff=parseInt(length)-hiddenFields;
        if(diff<=21){
            jQuery(".less").hide();
            jQuery(".more").show();
            jQuery(".pipe").hide();
        }

        if(hiddenFields==0){
            jQuery(".less").show();
            jQuery(".more").hide();
            jQuery(".pipe").hide();
        }

        if(diff > 21 && hiddenFields > 0){
            jQuery(".less").show();
            jQuery(".more").show();
            jQuery(".pipe").show();
        }
    }
    
    if(length >= 21){
        jQuery("#brandstable").append('<tr><td></td><td></td><td style="text-align: right;"><a onclick="lessItem()" class="less"> << Less</a><span class="pipe"> || </span><a onclick="moreItem()" class="more">More >></a></td></tr>');
    }
        
    if(jQuery("#brandstable tr:first td").length > 1){
        moreItem();
    }
</script>
<style type="text/css">
    .more, .less{cursor: pointer;}
</style>
<?php //echo $this->element('sql_dump'); ?>